<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html>
<head>
	<title>会员中心</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH }content/css/style.css?v=1.7">
	<script src="${ROOT_PATH }content/scripts/jquery-1.10.1.min.js"></script>
    <script src="${ROOT_PATH }content/scripts/jquery.form.js"></script>
    <script src="${ROOT_PATH }content/scripts/public.js"></script>
    <script src="${ROOT_PATH }content/scripts/artDialog/jquery.artDialog.js?skin=aero"></script>
    <script src="${ROOT_PATH }content/scripts/artDialog/artDialog.iframeTools.js"></script>
    <script src="${ROOT_PATH }content/scripts/jquery.fancybox.pack.js"></script>
    <script src="${ROOT_PATH }content/scripts/lk.js"></script>
    <script src="${ROOT_PATH }content/scripts/custom-form-elements.min.js"></script>   
	<style type="text/css">
		html{height:100%;}
		body{
			background:url(${ROOT_PATH }content/images/front/amani1_02.png) no-repeat;background-size: 100% 100%;height:100%;
		}
		#getcode{
			background:url(${ROOT_PATH }content/images/front/amani1_07.png) no-repeat;background-size: 100% 100%;
		}
		#binding{
			background:url(${ROOT_PATH }content/images/front/amani1_11.png) no-repeat;background-size: 100% 100%;
		}
		.xz_kahao{margin: 0px;padding:50px 10px 10px 10px;}
		.xz_kahao .xz_form_div input.lktxt {background: none;	border-color: #ccc;color:#ccc;}
	</style>
</head>
<body>
	<section class="headerBg"></section>
	<section class="xz_kahao">
	    <div class="logo"><img src="${ROOT_PATH }content/images/front/amani1_03.png" width="178" height="30"></div>
	    <form action="${ROOT_PATH }UCenter/index/binding2" name="bindform" id="bindform" method="post">
	        <input type="hidden" name="action" id="action" value="save" />
	        <div class="xz_form">
	            <div class="xz_form_div"><input name="realname" type="text" id="realname" placeholder="您的姓名" class="lktxt"></div>
	            <div class="xz_form_div"><input name="cardcode" type="text" id="cardcode" placeholder="会员卡号" onkeyup="this.value = this.value.toUpperCase();" class="lktxt"></div>
	            <div class="xz_form_div"><input name="mobile" type="text" id="mobile" placeholder="手机号码" class="lktxt"></div>
	            <div class="xz_form_div">
	                <div class="btn"><input name="getcode" type="button" id="getcode" value="" style="cursor:pointer"></div>
	                <div class="txt"><input name="checkcode" type="text" id="checkcode" placeholder="动态密码" class="lktxt"></div>
	            </div>
	            <div class="btn_submit"><input name="submit" type="submit" id="binding" value=""></div>
	        </div>
	    </form>
	    <div style="text-align: right;">
	    	<a href="${ROOT_PATH }UCenter/index/electronicCard" style="text-decoration: underline;font-size:12px;">没有会员卡</a>
	    </div>
	</section>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
 $(function () {
	 wx.config({
	        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	        appId: '${appId}', // 必填，公众号的唯一标识
	        timestamp:"${jsapi_timestamp}", // 必填，生成签名的时间戳
	        nonceStr: '${jsapi_nonceStr}', // 必填，生成签名的随机串
	        signature: '${jsapi_signature}', // 必填，签名，见附录1
	        jsApiList: ['addCard', 'hideOptionMenu','closeWindow'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	    });

	 wx.ready(function () {
		 wx.hideOptionMenu();});

	 function updateEndTime(validate) {
         validate = validate - 1;
         if (validate > 0) {
             $('#getcode').attr('disabled', true).val(validate + 'S');
             setTimeout('updateEndTime(' + validate + ')', 1000);
         } else {
             $('#getcode').attr('disabled', false).val('');
         }
     }

     function checkCard() {
         var realname = $("#realname");
         if (realname.val() == "") {
             altTip("请输入您的姓名！", 'error', function () {
                 realname.focus();
             });
             return false;
         }
         var cardcode = $("#cardcode");
         if (cardcode.val() == "") {
             altTip("请输入会员卡号！", 'error', function () {
                 cardcode.focus();
             });
             return false;
         }
         var mobile = $("#mobile"), mobile_val = mobile.val();
         if (mobile_val == "") {
             altTip("请输入您的手机号码！", 'error', function () {
                 mobile.focus();
             });
             return false;
         } else if (!/^1[0-9]{10}$/.test(mobile_val)) {
             altTip("您输入的手机号码格式不正确！", 'error', function () {
                 mobile.focus();
             });
             return false;
         }
         var isok = false;
         $.ajax({
             type: "POST",
             url: "${ROOT_PATH }UCenter/index/checkcard",
             async: false,
             data: {realname: realname.val(), cardcode: cardcode.val(), mobile: mobile.val()},
             dataType: "json",
             success: function (o) {
                 if (o.isok) {
                     isok = true;
                 } else {
                     altTip(o.error, 'error', function () {
                     	mobile.focus();
                     });
                 }
             }
         });
         return isok;

     }
		
		$('#bindform').submit(function () {
             var options = {
                 beforeSubmit: function () {
                     if (checkCard()) {
                         var checkcode = $('#checkcode');
                         if (checkcode.val() == '') {
                             altTip("请输入手机收到的验证码！", 'error', function () {
                                 checkcode.focus();
                             });
                             return false;
                         }
                     } else {
                         return false;
                     }
                 },
                 dataType: 'json',
                 success: function (txt) {
                     if (txt.isok) {
                     	$.ajax({
								 type: "post",
						         url: "${ROOT_PATH}UCenter/sendCard/send",
						         data: {},
						         dataType: "json",
						         success: function (o) { 
						        	var cardInfo={cardId: o.cardId, cardExt: JSON.stringify(o.cardExt)};
						        	var addCardInfo={cardList:[],success: function (res) {
			                            if (res.cardList) {
			                                alert('添加卡包成功');
			                            } else{
			                                altTip('添加卡包失败');
			                            }
			                            location.href = '${ROOT_PATH }UCenter/my';
			                        }};
						        	addCardInfo.cardList.push(cardInfo);
					                wx.addCard(addCardInfo); 
						         }
							});
                     	
                         return false;
                     } else {
                         altTip("邦定失败", 'error', function () {});
                         return false;
                     }
                 }
             };
             $('#bindform').ajaxSubmit(options);
             return false;
         });
			
			
			
			//获取短信验证码
         $('#getcode').click(function () {
             if (checkCard()) {
                 var mobile = $("#mobile"), mobile_val = mobile.val(), obj = $(this);
                 $.post('${ROOT_PATH }UCenter/index/getmobilecode', {mobile: mobile_val}, function (o) {
                         updateEndTime(120);
                     /*if (o) {
                     } else {
                         altTip('短信发送失败,请重新获取', 'error', function () {
                         	realname.focus();
                         });
                     }*/
                     return false;
                 }, 'json');
             }

         });          


   $('img').css('max-width', '100%'); 
	});
</script>

	
</body>
</html>